Configure Stripe for Checkout

A Billing Provider is needed to facilitate the checkout process and invoice customers for usage. When APIs are used, Moesif will aggregate the API usage and send the usage to the billing provider to be invoiced.

For a more in-depth explanation on integrating with Stripe check out our Integrating with Stripe Billing Meter documentation.

Setting up Stripe as a Billing Provider

In order to use Stripe as a billing provider for the Moesif Developer Portal, you’ll need to set up products and prices within Stripe.

There are four steps that need to be completed:

• Creating a Product in Stripe
• Integrate Moesif and Stripe
• Configuring the Stripe Extension in Moesif
• Setting up a Billing Meter in Moesif

Creating a Product in Stripe

Step 1: Log in and Navigate to Products

Log into Stripe and proceed to the Products page from the header menu in the Stripe UI. Once on the Products page, click on the Add Product button in the top right corner.

Step 2: Configure Product Settings

For your configuration with Moesif, ensure the following settings are applied when creating your product and price in Stripe:

• Billing period: Set the billing period to Monthly.

• Usage is metered: Check this box to enable metered usage.

• Charge for metered usage by: Select Sum of usage values during period to align with hourly reporting by Moesif to Stripe.

• Price description: Optionally, add a brief explanation of the price. This helps distinguish between multiple prices for the same product when configuring the billing meter in Moesif.

For further details on creating products and prices in Stripe, refer to the Stripe documentation.

Step 3: Save the Product

Once you’ve input all of the details for your product and price, click Save product in the top right corner of the screen. Follow this same procedure to create more products as needed.

Integrate Moesif and Stripe

To integrate Stripe with Moesif, navigate to the Billing Meters screen in Moesif. Click the Edit Billing Provider dropdown in the top right corner and select Stripe.

Follow the configuration steps presented in the modal to connect Stripe to Moesif. This setup ensures Moesif can report usage to Stripe for billing purposes. For detailed guidance, refer to our Stripe Integration Documentation.

Adding the Moesif Webhook to Stripe

Step 1: Open Webhooks in Stripe

The first step in the integration is to add the Moesif webhook into the Moesif configuration for Stripe. Adding this allows Stripe to send subscription updates to Moesif.

To add the Moesif webhook to Stripe, in the Stripe dashboard, click on Developers in the upper right-hand side, and then Webhooks in the left-side menu. This will bring you to the Webhooks page where you can view existing webhooks and add new ones. To add a new webhook we will click the Add an endpoint button at the bottom of the screen.

Step 2: Configure the Endpoint

From here, plug in the Moesif API endpoint URL and configure the events to listen to. You’ll want to copy your Moesif Webhook URL, shown in the Stripe Settings modal displayed in Moesif, into the Endpoint URL field. After this, click the Select Events button.

Step 3: Select Events

On the Select events to send screen, Scroll to the Customer section and select the option for Select all Customer events. After this, click the Add events button at the bottom of the screen. After this, you’ll be returned to the original screen where you added the endpoint details. Scroll to the bottom of the screen and click Add endpoint to save the webhook endpoint to Stripe.

For more information, refer to our documentation on adding the Moesif webhook to Stripe.

Configuring the Stripe Extension in Moesif

Step 1: Retrieve API Key

To enable Moesif to report usage quantities to Stripe, you need to provide the Stripe API details in the Moesif configuration screen.

For the Stripe API Key field in Moesif, retrieve your API key from Stripe by following these steps:

1. Log in to your Stripe account.
2. Navigate to the Developers section in the dashboard.
3. Select API Keys from the left-hand menu.
4. Copy either the Secret key or a Restricted key, depending on your setup needs.

For more information about Stripe API Keys, refer to Stripe’s API Keys documentation.

Step 2: Configure API Details in Moesif

After copying the key from Stripe, paste the key into the Stripe API Key field on the Stripe Configuration screen in Moesif. After setting the API key value, scroll down to the bottom of the screen and click Save to save the configuration in Moesif. At this point, your Stripe integration is complete in Moesif and you can begin to use it.

For detailed guidance, refer to our documentation on configuring the Stripe extension in Moesif.

Setting up a Billing Meter in Moesif

For API monetization with Moesif, a Billing Meter tracks usage based on specific criteria and reports it to the billing provider. Setting up a Billing Meter involves:

Step 1: Navigate to Billing Meters

In Moesif, navigate to the Billing Meters screen from the left-side menu and click Add Billing Meter.

Step 2: Configure the Meter

Provide the following details for your Billing Meter:

Field	Description
Billing Meter Name	Internal name for the Billing Meter.
Billing Provider	Choose Stripe as the billing provider.
Product	Select the Stripe product tied to your usage metrics.
Price	Select the Stripe price tied to your usage metrics.
Filters	Define criteria to include only relevant API requests.

For Metrics, common options include:

Metrics Option	Description
Volume > Event Count	Counts every event meeting the criteria.
Uniques > Users	Counts unique users sending requests that meet the criteria.
Uniques > Sessions/API Keys	Counts unique sessions or API keys used to send requests matching the criteria.

Step 3: Test the Meter

After creating the meter, perform a Meter Test to verify connectivity with Stripe and confirm usage reporting. Alternatively, you can test this manually after completing your Developer Portal setup.

For additional details, refer to our documentation on creating billing meters.

Adding Stripe to the Moesif Developer Portal

Finding Your API Key and Management URL

Adding Stripe to the Moesif Developer Portal requires adding some details to the .env or docker-compose.yml file in the Developer Portal project.

Find Your API Key

To find your API Key:

1. Log in to your Stripe account.
2. Navigate to the Developers section in the dashboard.
3. Click on API Keys in the left-hand menu.
4. Copy the Perishable key.

For more details, refer to Stripe’s API Keys documentation.

Find Your Management URL

The Management URL is required to integrate Stripe’s Customer Portal into the Moesif Developer Portal.

1. To locate and activate your Management URL:
2. Log in to your Stripe account.
3. Go to the Customer Portal settings page.
4. Scroll to the Integration Settings section and ensure the Customer Portal is activated.

Copy the Customer Portal Management URL provided in the settings. For more details, refer to Stripe’s no code customer portal documentation.

Updating Environment Variables

Environment Variables for Node

To configure Stripe in the Developer Portal, you will need to update two .env files located in different parts of your project:

• my-dev-portal-api/.env file: This is where you configure the backend API environment.
• my-dev-portal/.env file: This is where you configure the frontend environment.

Backend

• Open the my-dev-portal-api/.env file.
• Replace the following lines with the correct values:

STRIPE_API_KEY="your_api_key"

• Save the .env file to ensure the updated values are persisted.

Frontend

• Open the my-dev-portal/.env file.
• Replace the following lines with the correct values:

REACT_APP_STRIPE_PUBLISHABLE_KEY="your_api_key"
REACT_APP_STRIPE_MANAGEMENT_URL="your_management_url"

• Save the .env file to ensure the updated values are persisted.

Environment Variables for Docker

• Open the distribution/docker-compose.yml file.
• Add or update the following entries in the relevant service configuration under environment:

dev-portal-api:
  environment:
    - STRIPE_API_KEY="your_api_key"

dev-portal:
  environment:
    - STRIPE_API_KEY="your_api_key"
    - STRIPE_MANAGEMENT_URL="your_management_url"

• Save the docker-compose.yml file to ensure the updated values are persisted.

Next Steps

Next, move on to configuring your key provisioning provider to enable secure access to your APIs and ensure seamless API key management.

Verifying Billing Provider Functionality

After configuring the rest of the developer portal you can verify billing provider functionality in Stripe. On the Customers screen, you should be able to see your newly created user, tracked by their email. If you click on the customer, you should also be able to see their subscription. The subscription should match the one selected in the sign-up flow in the Developer Portal.